<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye Clappr Demo</title>
    <!-- Clappr Builds -->
    <script src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
    <!-- CDNBye P2PEngine -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
    <!-- CDNBye Clappr Plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/clappr-plugin.min.js"></script>
    <!-- Clappr Level Selector Plugin -->
    <script type="text/javascript"
            src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
</head>
<body>
<div id="player"></div>
<h3>download info:</h3>
<p id="info"></p>
<script>
    var player = new Clappr.Player(
        {
            source: "https://video-dev.github.io/streams/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8",
            parentId: "#player",
            autoPlay: true,
            plugins: [CDNByeClapprPlugin, LevelSelector],
            levelSelectorConfig: {
                title: 'Quality',
                labels: {
                    2: 'High', // 500kbps
                    1: 'Med', // 240kbps
                    0: 'Low', // 120kbps
                },
                labelCallback: function(playbackLevel, customLabel) {
                    return customLabel + playbackLevel.level.height+'p'; // High 720p
                }
            },
            playback: {
                hlsjsConfig: {
                    // Other hlsjsConfig options provided by hls.js
                    p2pConfig: {
                        logLevel: 'debug',
                        live: false,        // set to true in live mode
                        getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
                            var total = totalHTTPDownloaded + totalP2PDownloaded;
                            document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
                        },
                        // Other p2pConfig options provided by CDNBye
                    }
                }
            }
        });
</script>
</body>
</html>
